<template>
	<view class="myOrder_box">
		<view class="search_box dis_fx fx_column">
			<view class="search dis_fx fx_column flex1">
				<view class="icon"></view>
				<input type="text" placeholder="搜索按提示" placeholder-style="color: #D0D0D0">
				<view class="clear"></view>
			</view>
			<view class="cancel">取消</view>
		</view>
		<view class="order_type dis_fx fx_column">
			<view class="cur">全部</view>
			<view>待支付</view>
			<view>拼团中</view>
			<view>待出行</view>
			<view>待点评</view>
			<view>退款中</view>
		</view>
		<view class="order_item">
			<scroll-view scroll-y>
				<view class="item_box">
					<view class="item">
						<view class="state_box dis_fx fx_between">
							<view class="num">订单号：218927812739812</view>
							<text class="state state3">待出行</text>
						</view>
						<view class="info">
							<view>冰雪奇缘 九寨沟 熊猫基地 大美四川3日游</view>
							<view>出行日期：2019.1.20~2019.1.22</view>
						</view>
						<view class="addit dis_fx fx_between fx_column">
							<view class="addit_l">
								<view class="price">￥2688元</view>
								<text>4-6人团</text>
							</view>
							<view class="addit_r">
								<navigator url="" class="cur">处理</navigator>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="state_box dis_fx fx_between">
							<view class="num">订单号：218927812739812</view>
							<text class="state state2">拼团中</text>
						</view>
						<view class="info">
							<view>冰雪奇缘 九寨沟 熊猫基地 大美四川3日游</view>
							<view>出行日期：2019.1.20~2019.1.22</view>
						</view>
						<view class="addit dis_fx fx_between fx_column">
							<view class="addit_l">
								<view class="price">￥2688元</view>
								<text>4-6人团</text>
							</view>
							<view class="addit_r">
								<navigator url="" class="cur">设为成团</navigator>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="state_box dis_fx fx_between">
							<view class="num">订单号：218927812739812</view>
							<text class="state state3">待出行</text>
						</view>
						<view class="info">
							<view>冰雪奇缘 九寨沟 熊猫基地 大美四川3日游</view>
							<view>出行日期：2019.1.20~2019.1.22</view>
						</view>
						<view class="addit dis_fx fx_between fx_column">
							<view class="addit_l">
								<view class="price">￥2688元</view>
								<text>4-6人团</text>
							</view>
							<view class="addit_r">
								<navigator url="" class="cur">编辑</navigator>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="state_box dis_fx fx_between">
							<view class="num">订单号：218927812739812</view>
							<text class="state state4">出行中</text>
						</view>
						<view class="info">
							<view>冰雪奇缘 九寨沟 熊猫基地 大美四川3日游</view>
							<view>出行日期：2019.1.20~2019.1.22</view>
						</view>
						<view class="addit dis_fx fx_between fx_column">
							<view class="addit_l">
								<view class="price">￥2688元</view>
								<text>4-6人团</text>
							</view>
							<view class="addit_r">
								<navigator url="" class="cur">查看详情</navigator>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="state_box dis_fx fx_between">
							<view class="num">订单号：218927812739812</view>
							<text class="state state5">退款申请中</text>
						</view>
						<view class="info">
							<view>冰雪奇缘 九寨沟 熊猫基地 大美四川3日游</view>
							<view>出行日期：2019.1.20~2019.1.22</view>
						</view>
						<view class="addit dis_fx fx_between fx_column">
							<view class="addit_l">
								<view class="price">￥2688元</view>
								<text>4-6人团</text>
							</view>
							<view class="addit_r">
								<navigator url="">驳回</navigator>
								<navigator url="" class="cur">同意</navigator>
							</view>
						</view>
					</view>
			</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchWord:'',
				bannerArr:[],
				targetAddress: [],
				hotTravel: [],
			}
		},
		onLoad(){
			
		},
		methods: {
			
		}
	}
</script>

<style>
	.search_box{
		background: #fff;
		padding: 20upx 24upx;
	}
	.search_box .search{
		width: 100%;
		height: 70upx;
		border-radius: 35upx;
		background: #F1F1F1;
		padding: 0 30upx;
	}
	.search_box .search input{
		font-size: 28upx;
		flex: 1;
	}
	.search_box .search .icon{
		background: url() no-repeat center/contain;
		width: 25upx;
		height: 30upx;
		margin-right: 20upx;
	}
	.search_box .search .clear{
		background: url() no-repeat center/contain;
		width: 30upx;
		height: 30upx;
	}
	.search_box .cancel{
		margin-left: 30upx;
		color: #FFC800;
		font-size: 32upx;
	}
	.myOrder_box{
		height: 100%;
	}
	.myOrder_box .order_type>view{
		flex: 1;
		font-size: 28upx;
		color: #999999;
		text-align: center;
		line-height: 100upx;
	}
	.myOrder_box .order_type>view.cur{
		color: #FFC800;
		font-size: 32upx;
		font-weight: 600;
		position: relative;
	}
	.myOrder_box .order_type>view.cur::after{
		content: '';
		position: absolute;
		bottom: 10upx;
		background: #FFC800;
		width: 60upx;
		height: 5upx;
		left: 50%;
		margin-left: -30upx;
	}
	.order_item{
		height: calc(100% - 100upx);
	}
	scroll-view{
		height: 100%;
	}
	.order_item .item_box{
		padding: 0 24upx 24upx;
	}
	.order_item .item{
		margin-top: 24upx;
		box-shadow: 0 0 18upx 0 rgba(106, 79, 13, 0.12);
		padding: 24upx;
		border-radius: 10upx;
	}
	.order_item .item .state_box .num{
		font-size: 32upx;
		color: #333333;
		font-weight: 600;
	}
	.order_item .item .state_box .state{
		font-size: 28upx;
		color: #FC5C1D;
	}
	.order_item .item .state_box .state.state2{
		color: #FFC800;
	}
	.order_item .item .state_box .state.state3{
		color: #333333;
	}
	.order_item .item .state_box .state.state4{
		color: #999999;
	}
	.order_item .item .state_box .state.state5{
		color: #FC5C1D;
	}
	.order_item .item .info{
		font-size: 28upx;
		color: #757575;
		margin: 20upx 0 ;
	}
	.order_item .item .price{
		font-size: 36upx;
		color: #FFC800;
	}
	.order_item .item .addit_l text{
		font-size: 24upx;
		color: #999999;
	}
	.order_item .item .addit_r navigator{
		display: inline-block;
		vertical-align: middle;
		width: 160upx;
		height: 60upx;
		line-height: 60upx;
		border: 1px solid #FFC800;
		color: #FFC800;
		font-size: 30upx;
		border-radius: 30upx;
		text-align: center;
		margin-left: 30upx;
	}
	.order_item .item .addit_r navigator.cur{
		background: #FFC800;
		color: #fff;
	}
</style>
